<template>
<!-- 接收签到 -->
  <el-container @click="detail" ref="publishSign">
    <el-main>
      <h2  ref="publish">{{sign.name}}</h2>
      <h3 ref="publish2">{{sign.type}}</h3>
      <span ref="publish1">{{sign.time | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
      <el-popconfirm @confirm="pop(sign.id)" title="确定删除吗？">
        <el-button
          slot="reference"
          type="danger"
          icon="el-icon-delete"
          class="Sign-del"
          circle
        ></el-button>
      </el-popconfirm>
      <el-button class="detail" type="warning" @click="detail(sign.id)">详情</el-button>
    </el-main>
    <el-aside>
      <el-button type="success" icon="el-icon-check" circle></el-button>
    </el-aside>
  </el-container>
</template>

<script>
import { deleteSign } from '@/utils/api/sign'
import moment from 'moment'
export default {
  name: '',
  props: {
    sign: {
      type: Object,
      require: true
    }
  },
  components: {},
  data () {
    return {
      reFresh: true,
    }
  },
  filters: {
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  // created () {
  //   mySignUp()
  //     .then(res => {
  // if (res.data.code === 200) {
  //   // 成功
  //   this.$notify({
  //     title: '成功',
  //     message: '提交成功，请耐心等待消息',
  //     type: 'success'
  //   })
  // } else {
  //   this.$notify.error({
  //     title: '失败',
  //     message: '提交失败！请重试'
  //   })
  // }
  // })
  //     .catchr(() => {
  //       this.$notify.error({
  //         title: '失败',
  //         message: '提交失败！请重试'
  //       })
  //     })
  // },
  methods: {
    // 删除处理
    pop (id) {
      deleteSign(id).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.$emit("getNew")
      })
    },
    detail (id) {
      this.$router.push('/page/createClock/publishDetail/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
.el-container {
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #FFF;
  margin-top: 20px;
  margin-bottom: 30px;
  .el-main {
    padding: 10px 20px;
    position: relative;
    span {
      margin: 0 20px;
    }
  }
  .Sign-del{
    background-color: #FFF;
    color: #000;
    border: none;
  }
  .Sign-del:hover{
    color: #f56c6c;
  }
  .el-aside {
    position: relative;
    padding: 10px 20px;
    .el-button {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10%;
      width: 60px;
      height: 60px;
    }
    .signBtn{
      background-color: rgb(250, 205, 145);
    }
  }
}
.el-container:hover{
     box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
               inset 6px 6px 20px rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
    cursor: pointer;
}
h2{
  margin-bottom: 50px;
}
h3{
  position: absolute;
  top: 50px;
  right: 0;
}
.detail{
  cursor: pointer;
}
.detail:hover{
  color: #cd853f;
}
</style>
